<template>
  <view class="add-my-car">
    <view class="add-bg" @tap="close">
      <text class="add-che-name">添加爱车</text>
      <image class="add-che" src="/static/images/che.png"></image>
    </view>
    <view class="add-num-box">
      <car-number
        v-if="showCarNum"
        @numberInputResult="numberInputResult"
        :defaultStr="defaultNum"
      ></car-number>
      <!-- <car-num-input @setCarNum="getCarNum" class="my-com-iput"></car-num-input> -->
    </view>
    <view class="close" @tap="close"></view>
    {{ carNumBtn }}
    <button class="my-add-btn my-add-btn-dis" v-if="carNumBtn" @tap="clickFail">
      获取手机号码
    </button>
    <!--  #ifdef MP-WEIXIN	  -->
    <button
      class="my-add-btn"
      open-type="getPhoneNumber"
      type="primary"
      @getphonenumber="onGetWXPhoneNumber"
      v-if="!carNumBtn"
    >
      获取手机号码
    </button>
    <!--  #endif -->
    <!--  #ifdef MP-ALIPAY	  -->
    <button
      class="my-add-btn"
      open-type="getPhoneNumber"
      type="primary"
      @getphonenumber="onGetALIPhoneNumber"
      v-if="!carNumBtn"
    >
      获取手机号码
    </button>
    <!--  #endif -->
  </view>
</template>

<script>
// import carNumInput from '@/components/CarNumInput.vue';
import CarNumber from '@/components/car-number-input.vue';

// pages/addMyCar/addMyCar.js
const app = getApp();
let Sign = app.globalData.Sign;
let Store = app.globalData.Store;
let Api = app.globalData.Api;
// import Toast from '@vant/weapp/toast/toast';
export default {
  components: {
    CarNumber
  },
  data() {
    return {
      defaultNum: '',
      user_id: '',
      carNum: '',
      carNumBtn: true,
      showCarNum: false
    };
  },
  onLoad() { },
  onShow() {
    // this.setData({
    // this.user_id = Store.getItem('user_id')
    // let carNumber = Store.getItem('carNum')
    // this.defaultNum = carNumber
    // console.log('this.defaultNum: ', this.defaultNum);
    // // console.log('this.carNumber: ', this.carNumber);
    // // });
    // console.log(Store.getItem('purePhoneNumber'));
    // console.log(Store.getItem('carNum')); 
  },
  methods: {
    numberInputResult(result) {
      this.carNum = result
      if (result.length >= 7) {
        this.carNumBtn = false
      } else {
        this.carNumBtn = true
      }
    },
    close() {
      // const a = this.zpSelectComponent('.my-com-iput');
      // a.closeKeybord();
    },

    clickFail() {
      uni.showToast({
        title: '车牌号格式不正确',
        icon: 'none'
      });
    },

    //点击获取手机号(这里需要加判断区分支付宝还是微信 目前是微信的逻辑)
    onGetWXPhoneNumber(e) {
      let this_ = this;
      console.log(e);
      if (!e.detail.code) {
        return;
      }
      console.log(e.detail.code);
      const signObject = {
        code: e.detail.code
      };
      const signvalue = Sign.signutil(signObject);
      uni.showLoading({
        title: '提交中',
        mask: true
      });
      // Toast.loading({
      //   message: '提交中',
      //   forbidClick: true,
      //   duration: 0
      // });
      app.globalData
        .get(Api.getPhone, {
          code: e.detail.code,
          sign: signvalue
        })
        .then((res) => {
          // Toast.clear();
          uni.hideLoading();
          console.log(res.purePhoneNumber);
          Store.setItem('purePhoneNumber', res.purePhoneNumber);
          Store.setItem('carNum', this.carNum);
          uni.showToast({
            title: '添加成功'
          });
          this_.editInfo(this.user_id, res.purePhoneNumber, this.carNum);
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/sysUserInfo/sysUserInfo'
            });
          }, 800);
        })
        .catch((res) => {
          // Toast.clear();
          uni.hideLoading();
          console.log('error:' + res);
        });
    },
    onGetALIPhoneNumber(e) {
      let this_ = this;
      console.log(e);
      if (!e.detail.encryptedData.code) {
        return;
      }
      console.log(e.detail.encryptedData.code);
      const signObject = {
        code: e.detail.encryptedData.code
      };
      const signvalue = Sign.signutil(signObject);
      uni.showLoading({
        title: '提交中',
        mask: true
      });
      // Toast.loading({
      //   message: '提交中',
      //   forbidClick: true,
      //   duration: 0
      // });
      app.globalData
        .get(Api.getPhone, {
          code: e.detail.encryptedData.code,
          sign: signvalue
        })
        .then((res) => {
          // Toast.clear();
          uni.hideLoading();
          console.log(res.purePhoneNumber);
          Store.setItem('purePhoneNumber', res.purePhoneNumber);
          Store.setItem('carNum', this.carNum);
          uni.showToast({
            title: '添加成功'
          });
          this_.editInfo(this.user_id, res.purePhoneNumber, this.carNum);
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/sysUserInfo/sysUserInfo'
            });
          }, 800);
        })
        .catch((res) => {
          // Toast.clear();
          uni.hideLoading();
          console.log('error:' + res);
        });
    },

    editInfo(user_id, phone, cardCode) {
      let dd = encodeURI(cardCode);
      console.log(dd);
      const signObject = {
        user_id: user_id,
        phone: phone,
        cardCode: dd
      };
      const signvalue = Sign.signutil(signObject);
      app.globalData
        .get(Api.editUserInfo, {
          user_id: user_id,
          phone: phone,
          cardCode: dd,
          sign: signvalue
        })
        .then((res) => {
          console.log(res);
        })
        .catch((res) => {
          console.log('error:' + res);
        });
    }
  },
  mounted() {
    this.user_id = Store.getItem('user_id')
    let carNumber = Store.getItem('carNum')
    this.defaultNum = carNumber
    this.showCarNum = true
    if (carNumber.length >= 7) {
      this.carNumBtn = false
    } else {
      this.carNumBtn = true
    }
  }
};
</script>
<style>
@import "./sysAddMyCar.css";
</style>
